<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>世界时间精确到毫秒</title>
    <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
    <!--<link rel="stylesheet/less" type="text/css" href="less.less" />-->
    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script>
        function browserRedirect () {
            var sUserAgent = navigator.userAgent.toLowerCase()
            var bIsIpad = sUserAgent.match(/ipad/i) === 'ipad'
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) === 'iphone os'
            var bIsMidp = sUserAgent.match(/midp/i) === 'midp'
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) === 'rv:1.2.3.4'
            var bIsUc = sUserAgent.match(/ucweb/i) === 'ucweb'
            var bIsAndroid = sUserAgent.match(/android/i) === 'android'
            var bIsCE = sUserAgent.match(/windows ce/i) === 'windows ce'
            var bIsWM = sUserAgent.match(/windows mobile/i) === 'windows mobile'
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                return 'phone'
            } else {
                return 'pc'
            }
        }
        setRem()
        window.addEventListener('orientationchange', setRem)
        window.addEventListener('resize', setRem)
        window.addEventListener('resize', setRem)
        function setRem () {
            var html = document.querySelector('html')
            var app = document.getElementById("app");
            var iframe = document.getElementById("iframe");
            if (browserRedirect() === 'pc') {
                if (window.screen.width > 1360) {
                    html.fontSize=750/100+"px"
                }
            }

        }
    </script>
<body>
<style>
    *{
        margin:0;
        padding:0;
    }

    html,body{
        width:100%;
        height:100%;
        position:relative;
        font-size:28px;
        background: #000000;
    }
    #app{
        height:100%;


        margin:0 auto;

    }

    @media screen and (min-width: 1200px) {
        #app{
            width:750px;
        }
    }


    #showTime{

        text-align:center;
        font-size:1rem;
        color: #ffae28;

    }
    #showTime >li{
        float:left;
        width:1.5rem;
        list-style:none;
        margin-right:0.2rem;
    }

    [class*="flex-box"]{
        width:100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    [class*="flex-ibox"]{
        display: inline-flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        vertical-align: bottom;
    }
    [class*="flex-box"].flex-nowrap,[class*="flex-ibox"].flex-nowrap{
        flex-wrap: nowrap;
    }
    [class*="flex-box"].flex-wrap,[class*="flex-ibox"].flex-wrap{
        flex-wrap: wrap;
    }
    .flex-box-baseline{
        align-items: baseline;
    }
    .flex-box-rs, .flex-ibox-rs{
        flex-direction: row;
        justify-content: flex-start;
        align-content: flex-start;
    }
    .flex-box-re, .flex-ibox-re{
        flex-direction: row;
        justify-content: flex-end;
        align-content: flex-start;
    }
    .flex-box-rc,.flex-ibox-rc{
        flex-direction: row;
        justify-content: center;
        align-content: flex-start;
    }
    .flex-box-rcc, .flex-ibox-rcc{
        flex-direction: row;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    .flex-box-rb, .flex-ibox-rb{
        flex-direction: row;
        justify-content: space-between;
        align-content: flex-start;
    }
    .flex-box-ra, .flex-ibox-ra{
        flex-direction: row;
        justify-content: space-around;
        align-content: flex-start;
    }


    .flex-box-cs, .flex-ibox-cs{
        flex-direction: column;
        justify-content: flex-start;
        align-content: flex-start;
    }
    .flex-box-ce,.flex-ibox-ce{
        flex-direction: column;
        justify-content: flex-end;
        align-content: flex-start;
    }
    .flex-box-cc, .flex-ibox-cc{
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
    .flex-box-cb,.flex-ibox-cb{
        flex-direction: column;
        justify-content: space-between;
        align-content: flex-start;
    }
    .flex-box-ca, .flex-ibox-ca{
        flex-direction: column;
        justify-content: space-around;
        align-content: flex-start;
    }
    .flex-box-ccc, .flex-ibox-ccc{
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }

</style>
<div id="app" class="flex-box">
    <ul id="showTime" class="flex-box-rcc"></ul>

</div>
<script>

    let showTime = document.getElementById('showTime')
    let t = setInterval(function(){
        let data = new Date()
        let hou = data.getHours()
        let min = data.getMinutes()
        let sec = data.getSeconds()
        let minllsec = data.getMilliseconds()

        if(hou<10){
            hou = '0' + hou
        }
        if(min<10){
            min = '0' + min
        }
        if(sec<10){
            sec = '0' + sec
        }
        if(minllsec<100){
            minllsec = '0' + minllsec
        }

        showTime.innerHTML = `
            <li>${hou}: </li>
            <li>${min}: </li>
            <li>${sec}: </li>
            <li>${minllsec}</li>`
    },1)


</script>
</body>

</html>